import React, { Component } from 'react'
import { Route, Redirect } from 'react-router-dom'
import { getItem } from 'utils/stroage'

export class FrontendAuth extends Component {
  render() {
    //  结构配置对象和location
    const { location, config } = this.props
    // 解构出当前路由
    const { pathname } = location
    // token值
    const Token = getItem()
    // 当前配置对象
    const targetRouterConfig = config.find((i) => i.path === pathname)
    // 判断是否在登录页面且没有auth属性且没有token
    if (targetRouterConfig && !targetRouterConfig.auth && !Token) {
      return (
        <Route
          path={targetRouterConfig.path}
          component={targetRouterConfig.component}
        />
      )
    }
    // 如果有token
    if (Token) {
      // 且要跳到login 就跳到首页
      if (pathname === '/login') {
        return <Redirect to="/home" />
      } else {
        //   如果有targetRouterConfig 就跳到对应的路由
        if (targetRouterConfig) {
          return (
            <Route path={pathname} component={targetRouterConfig.component} />
          )
        } else {
          // 如果路由不合法，重定向到 404 页面
          return <Redirect to="/404" />
        }
      }
    } else {
      // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
      if (targetRouterConfig && targetRouterConfig.auth) {
        return <Redirect to="/login" exact />
      } else {
        // 非登陆状态下，路由不合法时，重定向至 404
        return <Redirect to="/404" />
      }
    }
  }
}
